<template>
    <form-field :ref="(el)=>customValid=el.customValid" :dirty="dirty" @valid="onValid" :innerValidators="[`datetimeRange|${args.min}-${args.max}`]">
        <datetime 
            :type="type"
            :value="dirtyStart" 
            :theme="theme" 
            :weekText="weekText"
            :importants="importants"
            :now="now"
            :clear="clear"
            :min="min" 
            :max="dirtyEnd||max" 
            :format="format" 
            :disabled="disabled" 
            :placeholder="placeholderStart" @change="onStartChange"/>
        <div class="ph-input-divider"> ~ </div>
        <datetime 
            :type="type"
            :value="dirtyEnd" 
            :theme="theme" 
            :weekText="weekText"
            :importants="importants"
            :now="now"
            :clear="clear"
            :min="dirtyStart||min" 
            :max="max" 
            :format="format" 
            :disabled="disabled" 
            :placeholder="placeholderEnd" @change="onEndChange"/>
    </form-field>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, ref, Ref, watch, inject} from 'vue'
import FormField from './field.vue'
import {datetimeRangeValid,Mode,Format} from '../../shared/datetime'
import Datetime from './datetime.vue'
export default defineComponent({
    components:{
        FormField,
        Datetime
    },
    props:{
        type:{type:String,default:"date"},
        format:{type:String},
        placeholderStart:{type:String},
        placeholderEnd:{type:String},
        disabled:{type:Boolean,default:false},
        
        theme:{type:String},
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc:string}>>
        },
        clear:{
            type:Boolean,
            default:true
        },
        now:{
            type:Boolean,
            default:true
        },
        start:{type:String},
        end:{type:String},
        min:{type:String,default:""},
        max:{type:String,default:""},
        customTip:{type:String}
    },
    setup(props,{emit}) {
        const validation = inject("phValidation") as boolean
        const dirty = ref<Array<string|undefined>>([props.start,props.end])
        const dirtyStart = ref(props.start)
        const dirtyEnd = ref(props.end)
        const fmt = props.format||Format[Mode[props.type]]
        const args={
            min:props.min.replace(/-/g,"_"),
            max:props.max.replace(/-/g,"_"),
            fmt
        }
        const cmp = computed(()=>{
            switch(props.type){
                case 'date':return 'Date';
                case 'year':return 'Year';
                case 'month':return 'Month';
                case 'time':return 'Time';
                default:return 'Datetime'
            }
        })  

        const customValid = ref() as Ref<(e:{valid:boolean,tip:string})=>void>
        const onStartChange = (v:string)=>{
            console.log(v,'onStartChange')
            dirtyStart.value = v
        }
        const onEndChange = (v:string)=>{
            console.log(v,'onEndChange')
            dirtyEnd.value = v
        }
        const doValid = ()=>{
            dirty.value = [dirtyStart.value,dirtyEnd.value]
            if(validation)return
            const res = datetimeRangeValid(dirtyStart.value,dirtyEnd.value,props.min,props.max)
            const valid = res===true?true:false
            const tip = res===true?"":res+""
            customValid.value({
                valid,tip
            })
        }
        watch(()=>dirtyStart.value,doValid)
        watch(()=>dirtyEnd.value,doValid)
        
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            cmp,
            args,
            dirty,
            dirtyStart,
            dirtyEnd,
            onStartChange,
            onEndChange,
            onValid,
            customValid
        }
    },
})
</script>
<style lang="scss" scoped>
.ph-input-divider{
    padding: 0 var(--ph-10);
}
</style>